<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false" :before-close="close">
      <el-form ref="RefForm" :model="formData" label-width="160px" :validate-on-rule-change="false" :rules="formRules" status-icon>
        <el-form-item v-if="!isEdit" label="父级工点名称">
          <span>{{ formData.parentName }}</span>
        </el-form-item>
        <el-form-item label="工点名称" prop="name">
          <el-input v-model="formData.name" maxlength="16" show-word-limit />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="0" placeholder="" />
          <el-tag type="danger">数字越小越靠前</el-tag>
        </el-form-item>
        <el-form-item label="可见" prop="name">
          <el-checkbox v-model="formData.isVisable" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Menu, MenuDetail } from '@/api/Menu'
// import { HostUser, HostUserDetail } from '@/api/HostUser'
import { eleValidator } from '@/utils/tools'
export default {
  data() {
    return {
      isForChild: false,
      id: '',
      title: '',
      alreadyAdded: 0,
      isEdit: false,
      loadingSubmit: false,
      dialogVisible: false,
      formData: {
        parentName: '',
        sort: 0,
        name: ''
      },
      formRules: {
        sort: { required: true, message: '请输入排序', trigger: 'blur' },
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          {
            validator: eleValidator([{ rule: 'isEmpty', msg: '名称不能为空' }]),
            trigger: 'blur'
          }
        ]
      }
    }
  },

  methods: {
    async open(row, isEdit) {
      var id = row.id
      this.dialogVisible = true
      this.formData.parentName = row.name
      this.formData.parentId = row.id

      if (isEdit) {
        this.title = '编辑工点'
        this.id = id
        this.isEdit = true
        console.info(id)
        const { data } = await MenuDetail({ id })
        this.formData = data
      } else {
        this.$nextTick(function () {
          this.$refs.RefForm.resetFields()
          this.formData.sort = row.childMenus && row.childMenus.length ? row.childMenus.length + 1 : 1
        })

        this.title = '新增工点'
        this.formData.id = 0
        this.formData.isVisable = true
      }
    },
    change() {},
    handleSubmit() {
      this.formData.isActive = true
      this.isVisable = true
      this.loadingSubmit = true
      this.$refs.RefForm.validate(async (valid) => {
        if (valid) {
          const method = this.isEdit ? 'PUT' : 'POST'
          Menu(this.formData, method, this.formData.id)
            .then((res) => {
              this.$message.success('操作成功！')
              this.$emit('getList')
              this.loadingSubmit = false
              this.close()
            })
            .catch(() => {
              this.$message.error('操作失败！')
            })
        } else {
          this.loadingSubmit = false
        }
      })
    },
    close() {
      this.isEdit = false
      this.loadingSubmit = false
      this.dialogVisible = false
      this.formData.name = ''
      this.id = 0
    },
    cancel() {
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-dialog__title {
    color: #999999;
  }
</style>
